<script lang="ts" setup>
import { ref, reactive, PropType, computed, watch, watchEffect } from 'vue';
import FilterCondition from '../FilterCondition/index.vue';
import {
  IconPlusCircleFill,
  IconCaretDown
} from '@arco-design/web-vue/es/icon';
import {
  CONTAIN,
  ADNOR,
  PERIOD,
  SOMETIME,
  NUMBERUNIT
} from '@/constants/indexTree';
import API from '@/services';
import { Message } from '@arco-design/web-vue';
import { useRouter, useRoute} from 'vue-router';
const route = useRoute();
const treeId = ref<any>(route.query.id)
const props = defineProps({
  metricsId: {
    type: String || Number
  },
  curMetricsSetting: {
    type: Object as PropType<any>
  },
  metricsName: {
    type: String || undefined
  },
  dimensionConditionObj: {
    type: Object as PropType<any>,
    default: {
      ifGroupBy: undefined,
      dimensionOption: []
    }
  }
});
const emit = defineEmits(['timeConfigSuccess']);
const modalVisible = ref<boolean>(false);
const formData = ref();
let inheritDimension = reactive<any>({
  dimensionOption: [],
  ifGroupBy: undefined,
  timeframe: ''
});
const dimensionOption = ref<any>();
const formRef = ref();
const filterConditionRes = ref<any>([]);
const ifGroupBy = ref<any>(false);
const popVisible = () => {
  modalVisible.value = true;
};
const onOk = () => {
  if (formData.value.statisticalPeriod.type === 'RECENT' && !formData.value.statisticalPeriod.offset) {
    Message.warning('请选择统计周期');
    return
  }
  const fieldFrom = filterConditionRes.value.filter((item: any) => {
    return !item.value.dimId || !item.value.values?.length;
  });
  if (fieldFrom?.length > 0) {
    Message.warning('请选择过滤条件');
    return;
  }

  // if (!filterConditionRes.value?.length) {
  //   Message.warning('请添加过滤条件');
  //   return;
  // }
  modalVisible.value = false;
  formData.value.metricsConditions = filterConditionRes.value?.map(
    (item: any) => {
      return {
        ...item.value
      };
    }
  );
  Message.success('添加成功');

  emit('timeConfigSuccess', formData.value);
  console.log('formData.statisticalPeriod--', formData.value);
};

// 增加过滤数据
const handleAddFilter = () => {
  filterConditionRes.value.push({
    value: {
      fieldName: '',
      opType: '',
      values: [],
      dimId: '',
      dimName: ''
    }
  });
};
const onRemoveList = (index: number) => {
  filterConditionRes.value.splice(index, 1);
};
watch(
  () => props.dimensionConditionObj,
  (v) => {
    inheritDimension = Object.assign({}, v);
    dimensionOption.value = v.dimensionOption?.filter(
      (item: any) => item.columnType === 2
    );
    if (!inheritDimension.ifGroupBy) {
      if (!treeId.value) {
        formData.value.statisticalPeriod.type = 'DAY';
      }
      ifGroupBy.value = false
    } else {
      ifGroupBy.value = true;
    }
  },
  {
    deep: true
  }
);
watch(
  () => props.curMetricsSetting,
  (v) => {
    formData.value = v;
    filterConditionRes.value = v.metricsConditions?.map((item: any) => {
      return {
        value: {
          ...item
        }
      };
    });
  },
  {
    immediate: true
  }
);
defineExpose({
  popVisible
});
</script>

<template>
  <a-modal
    :visible="modalVisible"
    titleAlign="start"
    :unmountOnClose="true"
    :maskClosable="false"
    :title="props.metricsName"
    width="836px"
    modal-class="indexModal"
    @ok="onOk"
    @cancel="() => (modalVisible = false)"
  >
    <a-form ref="formRef" :model="formData" :style="{ width: '100%' }">
      <a-form-item
        :label-col-props="{ span: 3 }"
        :label-col-style="{ width: '70px' }"
      >
        <template #label>
          <span class="col_red mr-4">*</span>
          <span>统计周期 :</span>
        </template>
        <a-select
          class="w129"
          size="medium"
          v-model="formData.statisticalPeriod.type"
          :options="SOMETIME"
          :disabled="ifGroupBy"
        >
          <template #arrow-icon>
            <icon-caret-down />
          </template>
        </a-select>
        <a-input-number
          v-if="formData.statisticalPeriod.type === 'RECENT'"
          class="ml-6 w129"
          v-model="formData.statisticalPeriod.offset"
          :min="1"
          :precision="0"
          size="medium"
        />
        <a-select
          v-if="formData.statisticalPeriod.type === 'RECENT'"
          size="medium"
          v-model="formData.statisticalPeriod.timeUnit"
          class="ml-6 w129"
          :options="PERIOD"
        >
          <template #arrow-icon>
            <icon-caret-down />
          </template>
        </a-select>
      </a-form-item>
      <a-form-item 
          show-colon 
          :rules="[{ required: true, message: '数值格式是必传项' }]"
          field="numberFormat" 
          label="数值格式"
          :label-col-props="{span: 3}"
          :label-col-style="{width: '80px'}"
      >
          <a-radio-group 
              v-model="formData.numberFormat"
              :options="NUMBERUNIT"
          >
          </a-radio-group>
      </a-form-item>
      <a-form-item 
          :label-col-style="{width: '80px'}"
          :label-col-props="{span: 3}"
          :wrapper-col-props="{span: 21}"
          class="fillter-condition"
      >
          <template #label>
              <!-- <span class="col_red mr-4">*</span> -->
              <span>过滤条件 :</span>
          </template>
          <div class="dis-flex">
              <span class="filter-line"></span>
              <span>
                  <a-select 
                      :style="{width: '72px'}"
                      :options="ADNOR"
                      v-model="formData.rela"
                      size="mini"
                      class="mlr-6 andOr"
                  >
                    <template #arrow-icon>
                      <icon-caret-down />
                  </template>
                  </a-select>
              </span>
              <span class="filter-line"></span>
              <div class="ml-6">
                  <filter-condition
                      v-for="(item, index) of filterConditionRes"
                      v-model="item.value"
                      :key="index"
                      :disable-remove="index === 0"
                      :containCondition="CONTAIN"
                        :detailDrewer = 'false'
                        :dimensionOption="dimensionOption"
                      @remove="() => onRemoveList(index)"
                      size="medium"
                  />
                  <div class="add-icon">
                      <icon-plus-circle-fill 
                          style="color: #3C6EFF; 
                          cursor: pointer;"
                          size="16"
                          @click="handleAddFilter"
                      />
                  </div>
                  
              </div>
              
          </div>
          
      </a-form-item>
    </a-form>
</a-modal>


</template>
<style lang="scss">
.indexModal {
  .arco-modal-body {
    padding: 18px 18px 18px 10px;
    .andOr {
      background: #f6f8fc;
      border-radius: 3px;
      width: 52px !important;
      height: 24px;
      text-align: center;
      padding-right: 2px;
      // padding-left: 12px;
      border: none;
      .arco-select-view-suffix {
        padding-left: 2px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@import './index.scss';
</style>
